<template>
  <div class="geomap-chart" ref="chart">
  </div>
</template>
<script>
import GeomapChart from '../../util/d3_chart/geomap-chart'
export default {
  props: ['chartData', "mapWidth", "mapHeight"],
  data(){
    return {
       items: { area: []},
       width: 500,
       height: 420,
       currentMap: null
    }
  },
  computed: {
    element () {
      return this.$refs.chart
    }
  },
  methods: {
    renderChart () {
      if(this.currentMap) this.currentMap = null;
      var data = this.items;
      this.element.innerHTML = ''
      //if (data.area.length > 0) {
        this.currentMap = new GeomapChart({
          selector: this.element,
          geoJSON: data,
          mapWidth: this.mapWidth || this.width,
          mapHeight: this.mapHeight || this.height,
          change: function (d) {
            console.dir(d)
          }
        })
      // } else {
      //   this.element.innerHTML = '<div class="empty">暂无数据</div>'
      // }
    }
  },
  watch: {
      chartData:{
        immediate: true,
        handler(val){
          this.items = val;
          this.$nextTick(() => {
                this.renderChart();
           });
        }
      }
  },
  mounted () {
    this.items = this.chartData;
    this.$nextTick(() => {
      this.renderChart();
    })
  }
}
</script>
<style lang="scss">
.empty{
    text-align:center;
    width:100%;
    height:100%;
    color:#ccc;
    font-size:13px;
}
</style>
<style lang="scss">
.geomap-chart svg{
    margin:0 auto;
    display:block;
    padding-left:15px;
}
.mapTip {
  position: absolute;
  display: none; //z-index:5000;
  color: #000;
  opacity: 0;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  transition: left .3s, top .3s;
  -moz-transition: left .3s, top .3s;
  -webkit-transition: left .3s, top .3s;
  -o-transition: left .3s, top .3s;
  .mapTip_index {
    padding: 10px 15px;
    text-align: center;
    // width: 104px;
    // height: 76px;
    box-sizing: border-box;

    .map_pro {
      font-size: 12px;
    }
    .map_r {
      font-size: 24px;
    }
  }
}
</style>

